import React, { useEffect, useState } from 'react'
import { Toast, NavBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { Tabs } from 'antd-mobile'
import style from './index.module.css'
import axios from '../../utils/index'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const aaa = async () => {
        const res = await axios.get('/api/jktab')
        if (res.data.code == 200) {
            setList(res.data.jktab)
            console.log(res.data.jktab);
        }

    }
    useEffect(() => {
        aaa()
    }, [])
    return (
        <div>
            <NavBar
                title='男性健康'
                onClickLeft={() => navigate(-1)}
            />
            <Tabs defaultActiveKey='0'>
                {
                    list && list.map((item, index) => (
                        <Tabs.Tab title={item.title} key={index}>
                            <div className={style.box}>
                                {
                                    item.children.length > 0 && item.children.map((v, i) => (
                                        <div key={i}>
                                            <div className={style.box1}>
                                                <img src={v.img} alt="" style={{ width: '168px', height: '100px', }} />
                                                <p>{v.title}</p>
                                                <p> <span style={{ color: 'red' }}>￥{v.price}</span> <span style={{ marginLeft: '80px' }}>已售{v.shou}</span> </p>
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </Tabs.Tab>
                    ))
                }
            </Tabs>
        </div>
    )
}

export default Index
